<template>
  <div class="home-wrap">
    <div class="left">
      <div class="tabs">
        <a-tabs :default-active-key="1" @change="clickTabs">
          <a-tab-pane v-for="(item,index) in tabs" :key="index" :tab="item">
            <router-view></router-view>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <div class="right">
      <div class="write">
        <div class="title">
          <div class="title_left">
            <div class="icon"><a-icon type="user" /></div>
            创作中心
            <div class="level">
              <div class="num">LV4</div>
              <div class="text">海盐计划</div>
            </div>
          </div>
          <div class="draft">草稿箱(5)</div>
        </div>
        <div class="op_btn">
          <div class="item small-hand answer" @click="toAnswerQuestion">
            <div class="icon">
              <a-icon type="file-text" />
            </div>
            回答问题
          </div>
          <div class="item small-hand video" @click="toUploadVideo">
            <div class="icon">
              <a-icon type="video-camera" />
            </div>
            发视频
          </div>
          <div class="item small-hand write" @click="toWrite">
            <div class="icon">
              <a-icon type="form" />
            </div>
            写文章
          </div>
          <div class="item small-hand think" @click="openWriteIdea">
            <div class="icon">
              <a-icon type="bulb" />
            </div>
            写想法
          </div>
        </div>
        <div class="swiper">
          <a-carousel autoplay>
            <div><h3>1</h3></div>
            <div><h3>2</h3></div>
            <div><h3>3</h3></div>
            <div><h3>4</h3></div>
          </a-carousel>
        </div>
        <div class="btn">
          进入创作中心>
        </div>
      </div>
      <div class="concern">
        <div class="title">
          <div class="icon"><a-icon type="user" /></div>
          推荐关注
        </div>
        <div class="swiper">
          <a-carousel arrows>
            <div
                slot="prevArrow"
                class="custom-slick-arrow pre"
            >
              <a-icon @click="clickPre" type="left-circle" />
            </div>
            <div slot="nextArrow" class="custom-slick-arrow next">
              <a-icon @click="clickNext" type="right-circle" />
            </div>
            <div class="swiper-item">
              <div class="item">
                <div class="img_info">
                  <div class="img">
                    <img src="../assets/img.jpg" alt="">
                  </div>
                  <div class="info">
                    <div class="top">hahh</div>
                    <div class="bottom">发几款</div>
                  </div>
                </div>
                <div class="attention">+ 关注</div>
              </div>
              <div class="item">
                <div class="img_info">
                  <div class="img">
                    <img src="../assets/img.jpg" alt="">
                  </div>
                  <div class="info">
                    <div class="top">hahh</div>
                    <div class="bottom">发几款</div>
                  </div>
                </div>
                <div class="attention">+ 关注</div>
              </div>
              <div class="item">
                <div class="img_info">
                  <div class="img">
                    <img src="../assets/img.jpg" alt="">
                  </div>
                  <div class="info">
                    <div class="top">hahh</div>
                    <div class="bottom">发几款</div>
                  </div>
                </div>
                <div class="attention">+ 关注</div>
              </div>
              <div class="item">
                <div class="img_info">
                  <div class="img">
                    <img src="../assets/img.jpg" alt="">
                  </div>
                  <div class="info">
                    <div class="top">hahh</div>
                    <div class="bottom">发几款</div>
                  </div>
                </div>
                <div class="attention">+ 关注</div>
              </div>
            </div>
            <div class="swiper-item">
              <div class="item">
                <div class="img_info">
                  <div class="img">
                    <img src="../assets/img.jpg" alt="">
                  </div>
                  <div class="info">
                    <div class="top">hahh</div>
                    <div class="bottom">发几款</div>
                  </div>
                </div>
                <div class="attention">+ 关注</div>
              </div>
              <div class="item">
                <div class="img_info">
                  <div class="img">
                    <img src="../assets/img.jpg" alt="">
                  </div>
                  <div class="info">
                    <div class="top">hahh</div>
                    <div class="bottom">发几款</div>
                  </div>
                </div>
                <div class="attention">+ 关注</div>
              </div>
              <div class="item">
                <div class="img_info">
                  <div class="img">
                    <img src="../assets/img.jpg" alt="">
                  </div>
                  <div class="info">
                    <div class="top">hahh</div>
                    <div class="bottom">发几款</div>
                  </div>
                </div>
                <div class="attention">+ 关注</div>
              </div>
              <div class="item">
                <div class="img_info">
                  <div class="img">
                    <img src="../assets/img.jpg" alt="">
                  </div>
                  <div class="info">
                    <div class="top">hahh</div>
                    <div class="bottom">发几款</div>
                  </div>
                </div>
                <div class="attention">+ 关注</div>
              </div>
            </div>
          </a-carousel>
          <div class="current-num">{{currentId}}/3</div>
        </div>
      </div>
      <div class="fun">
        <div class="img">
          <img src="../assets/fun.png" alt="">
        </div>
        <div class="btn">
          <div class="item">
            <a-icon type="rise" />
            live
          </div>
          <div class="item">
            <a-icon type="snippets" />
            书店
          </div>
          <div class="item">
            <a-icon type="pie-chart" />
            圆桌
          </div>
          <div class="item">
            <a-icon type="edit" />
            专栏
          </div>
          <div class="item">
            <a-icon type="alert" />
            付费咨询
          </div>
          <div class="item">
            <a-icon type="bulb" />
            百度百科
          </div>
        </div>
      </div>
      <div class="setting">
        <div class="item">
          <div class="icon-title">
            <div class="icon"><a-icon type="star" /></div>
            我的收藏
          </div>
          <div class="num">0</div>
        </div>
        <div class="item">
          <div class="icon-title">
            <div class="icon"><a-icon type="star" /></div>
            我关注的问题
          </div>
          <div class="num">0</div>
        </div>
        <div class="item">
          <div class="icon-title">
            <div class="icon"><a-icon type="star" /></div>
            我的邀请
          </div>
          <div class="num">0</div>
        </div>
        <div class="item">
          <div class="icon-title">
            <div class="icon"><a-icon type="star" /></div>
            我的余额
          </div>
          <div class="num">0</div>
        </div>
        <div class="item">
          <div class="icon-title">
            <div class="icon"><a-icon type="star" /></div>
            我的礼券
          </div>
          <div class="num">0</div>
        </div>
        <div class="item">
          <div class="icon-title">
            <div class="icon"><a-icon type="star" /></div>
            站务中心
          </div>
          <div class="num">0</div>
        </div>
        <div class="item">
          <div class="icon-title">
            <div class="icon"><a-icon type="star" /></div>
            帮助与客服
          </div>
          <div class="num">0</div>
        </div>
        <div class="item">
          <div class="icon-title">
            <div class="icon"><a-icon type="star" /></div>
            版权服务中心
          </div>
          <div class="num">0</div>
        </div>

      </div>

    </div>
<!--    写想法的弹框-->
    <a-modal
        title="请输入你的想法"
        v-model="isIdeaVisible"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-textarea v-model="ideaContent" placeholder="请输入你的想法" :auto-size="{ minRows: 5 }" />
      <div class="areas-wrap">
        <a-select
          mode="multiple"
          style="width: 100%"
          placeholder="选择所属的领域"
          v-model="chooseAreas"
        >
          <a-select-option v-for="item in areas" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {getAreas,publish} from '@/api/request'
import {getCurrentTime} from '@/assets/js/getTime'
// import homeArticleCard from "@/components/homeArticleCard";
export default {
  name: 'myHome',
  components: {
    // homeArticleCard
  },
  data(){
    return{
      currentId:1,
      tabs: ['关注','推荐','热榜','视频'],
      tabsType:1,//1就是一般的，2表示是等你来答的模块
      isClickEllipsis:false,
      isIdeaVisible:false,
      ideaContent:'',
      chooseAreas:[],
      areas:[]
    }
  },
  methods:{
    toAnswerQuestion(){
      this.$router.push('/question/waiting')
    },
    handleGetAreas(){
      getAreas().then(res=>{
        if(res.data.status===0){
          this.areas=res.data.data
        }
      })
    },
    clickPre(){
      // console.log('ddd')
      if(this.currentId===1){
        this.currentId=3
      }else {
        this.currentId--
      }
    },
    clickNext(){
      if(this.currentId===3){
        this.currentId=1
      }else {
        this.currentId++
      }
    },
    clickTabs(key){
      if(this.tabsType===1){
        if(key==0){
          this.$router.push('/follow')
        }else if(key==1){
          this.$router.push('/')
        }else if(key==2){
          this.$router.push('/hot')
        }else if(key==3){
          this.$router.push('/video')
        }
      }else if(this.tabsType===2){
        if(key==0){
          this.$router.push({
            path:'',
            query:{}
          })
        }else if(key==1){
          this.$router.push({
            path:'',
            query:{
              type:'invite'
            }
          })
        }else if(key==2){
          this.$router.push({
            path:'',
            query:{
              type:'new'
            }
          })
        }else if(key==3){
          this.$router.push({
            path:'',
            query:{
              type:'hot'
            }
          })
        }
      }

    },
    handleOk(){
      let obj={
        content:this.ideaContent,
        time:getCurrentTime(),
        type:'2',
        title:'我有一个想法',
        areas:JSON.stringify(this.chooseAreas)
      }
      publish(obj).then(res=>{
        // console.log(res)
        if(res.data.status===0){
          this.$message.success('发布成功！')
          this.handleCancel()
        }
        else{
          this.$message.error('发布失败！')
        }
      })
      
    },
    handleCancel(){
      this.ideaContent=''
      this.isIdeaVisible=false
      this.chooseAreas=[]
    },
    openWriteIdea(){
      this.isIdeaVisible=true
    },
    toWrite(){
      this.$router.push('/write')
    },
    toUploadVideo(){
      this.$router.push('/uploadVideo')
    }
  },
  mounted(){
    this.handleGetAreas()
    if(this.$route.path==='/question/waiting'){
      this.tabs=['为你推荐','邀请回答','最新问题','人气问题']
      this.tabsType=2
    }else {
      this.tabs=['关注','推荐','热榜','视频']
      this.tabsType=1
    }
  },
  watch:{
    $route(newValue){
      console.log(newValue.path)
      if(newValue.path=='/question/waiting'){
        this.tabs=['为你推荐','邀请回答','最新问题','人气问题']
        this.tabsType=2
      }
      else {
        this.tabs=['关注','推荐','热榜','视频']
        this.tabsType=1
      }
    },
    immediate:true
  }
}
</script>

<style lang="less" scoped>
.home-wrap{
  padding: 0 16px;
  max-width: 1000px;
  display: flex;
  .left{
    width: 654px;
    margin-right: 10px;
    box-shadow: 0 1px 3px hsla(0,0%,7%,.1);
    background-color: #ffffff;
    border-radius: 5px;
    padding: 16px;
  }
  .right{
    .write{
      background-color: #ffffff;
      box-shadow:rgba(18, 18, 18, 0.1) 0px 1px 3px 0px;
      border-radius: 5px;
      padding: 16px;
      box-sizing: content-box;
      .title{
        display: flex;
        justify-content: space-between;
        .title_left{
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 600;
          .icon{
            margin-right: 10px;
            font-size: 20px;
          }
          .level{
            margin-left: 10px;
            display: flex;
            .num{
              margin-right: 10px;
            }
          }
        }
        .draft{
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .op_btn{
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        .item{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .icon{
            font-size: 30px;
          }
        }
      }
      .swiper{
        margin-bottom: 20px;
        /deep/ .slick-slider {
          text-align: center;
          height: 100px;
          width: 268px;
          line-height: 100px;
          background: #364d79;
          overflow: hidden;
        }
      }
      .btn{
        width: 268px;
        border: 1px solid rgba(5, 109, 232, 0.5);
        height: 38px;
        color: rgb(5, 109, 232);
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .concern{
      margin-top: 20px;
      background-color: #ffffff;
      box-shadow:rgba(18, 18, 18, 0.1) 0px 1px 3px 0px;
      border-radius: 5px;
      padding: 16px;
      box-sizing: content-box;
      .title{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .icon{
          font-size: 20px;
          margin-right: 10px;
        }
      }
      .swiper{
        /deep/ .slick-slider {
          text-align: center;
          //height: 100px;
          width: 268px;
          //line-height: 100px;
          //background: #364d79;
          overflow: visible;
        }
        .item:last-of-type{
          margin-bottom: 0;
        }
        .item{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
          .img_info{
            display: flex;
            align-items: center;
            justify-content: center;
            .img{
              width: 40px;
              height: 40px;
              img{
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }
            .info{
              margin: 0 10px;
            }
          }
          .attention{
            color: #364d79;
          }
        }
        /deep/ .custom-slick-arrow {
          width: 12px;
          height: 12px;
          font-size: 12px;
          color: cornsilk;
          background-color: red;
          opacity: 0.3;
          top:215px;
        }
        /deep/ .pre{
          left: 20%;
          zIndex: 100
        }
        /deep/ .next{
          right: 20%;
        }
        /deep/ .custom-slick-arrow:before {
          display: none;
        }
        /deep/ .custom-slick-arrow:hover {
          opacity: 0.5;
        }
        .current-num{
          font-size: 12px;
          text-align: center;
        }
      }
    }
    .fun{
      margin-top: 20px;
      background-color: #ffffff;
      box-shadow:rgba(18, 18, 18, 0.1) 0px 1px 3px 0px;
      border-radius: 5px;
      padding: 16px;
      box-sizing: content-box;
      .img{
        width: 268px;
        height: 100px;
        margin-bottom: 20px;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .btn{
        display: flex;
        flex-wrap: wrap;
        .item{
          width: 33.3%;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin-bottom: 10px;
          font-size: 16px;
          font-weight: 600;
        }
      }
    }
    .setting{
      background-color: #ffffff;
      box-shadow:rgba(18, 18, 18, 0.1) 0px 1px 3px 0px;
      border-radius: 5px;
      padding: 16px;
      box-sizing: content-box;
      margin-top: 20px;
      .item:last-of-type{
        margin-bottom: 0;
      }
      .item{
        display: flex;
        margin-bottom: 10px;
        justify-content: space-between;
        font-size: 16px;
        .icon-title{
          display: flex;
          align-items: center;
          justify-content: center;
          .icon{
            font-size: 20px;
            margin-right: 20px;
          }
        }
        .num{
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
.areas-wrap{
  margin-top: 20px;
}
</style>
